<template>
	<div id="home" class="i_maxW">
		<!-- 单级 -->
		<template v-if="isSchool">
			<div class="terch-submenu">
				<div class="terch-submenu-ls clear">
					<span>学段：</span>
					<div class="terch-submenu-ls-i">
						<template v-for="item of sectionList" >
							<el-radio v-model="section_id" 
							@change="getSubjectList(item.id)"
							:label="item.id" :key="item.id">{{item.name}}</el-radio>
						</template>
					</div>
				</div>

				<div class="terch-submenu-ls clear">
					<span>科目：</span>
					<div class="terch-submenu-ls-i">
						<template v-for="item of subjectList" >
							<el-radio v-model="subject_id" 
							@change="subjectChange(item.id)"
							:label="item.id" :key="item.id">{{item.name}}</el-radio>
						</template>
					</div>
				</div>
			</div>
		</template>
		<!-- 多级 联动选择 -->
		<template v-else>
			<multiCascader @resChosed="resChosed"></multiCascader>
		</template>
		
		<div class="terch-screen clear">
			<template>
				<div class="terch-screen-l fl">
					<el-radio v-model="screen" label="favs" @change="getterchList()">按人气</el-radio>
					<el-radio v-model="screen" label="course" @change="getterchList()">按课程</el-radio>
				</div>
			</template>
			<div class="terch-screen-r fr">
				<el-input v-model="keyword" placeholder="输入老师名字搜索" suffix-icon="el-icon-search" @change="getterchList()"></el-input>
			</div>
		</div>

		<ul class="terch-list clear"  v-loading="loading">
			<!-- 单级 -->
			<template v-if="!isMulti">
				<li class="terch-list-i fl" v-for="(item,index) of terchList" :key="index">
					<div class="terch-list-i-h">
						<div class="box">
							<img :src="BASE_URL + item.avatar_path" >
						</div>
						<div>{{item.name}}</div>
						<template>
							<div class="terch-list-i-pl">- {{item.sub_name}} -</div>
						</template>
					</div>
					<div class="terch-list-i-t">
						<div>{{item.name}}</div>
						<template>
							<div class="terch-list-i-pl">- {{item.sub_name}} -</div>
						</template>
						<template>
							<div v-if="item.autograph">{{item.autograph}}</div>
							<div v-else class="terch-list-i-pl">Hi</div>
						</template>
						
						<div>
							<button  v-preventReClick="3000" class="ipng but_maino1_slide" @click="goToAppModel('teach/space',item.id)"></button>
							<template v-if="item.id == $g.user_id">
								<button  v-preventReClick="3000" class="ipng but_Collection02_slide"></button>
							</template>
							<template v-else>
									<button  v-preventReClick="3000" class="ipng but_Collection02_slide" v-if="!is_newlogin" @click="getFollow(item.id)"></button>
									<button  v-preventReClick="3000" class="ipng but_Collection02_slide" v-else-if="item.is_relation === 0" @click="getFollow(item.id, 'add')"></button>
									<button  v-preventReClick="3000" class="ipng but_Collection02_down" @click="getFollow(item.id, 'del')" v-else></button>
							</template>

							<button  v-preventReClick="3000" class="ipng but_chat02_slide" @click="parent(item, 1)"></button>
						</div>
					</div>
				</li>
			</template>
            <!-- 多级 -->
			<template v-else>
				<li class="terch-list-i fl" v-for="item of terchList" :key="item.id">
					<div class="terch-list-i-h">
						<div class="box">
							<img :src="BASE_URL + item.avatar_path" >
						</div>
						<div>{{item.user_name}}</div>
						<template>
							<div class="terch-list-i-pl">- {{item.subject_name}} -</div>
						</template>
					</div>
					<div class="terch-list-i-t">
						<div>{{item.user_name}}</div>
						<template>
							<div class="terch-list-i-pl">- {{item.subject_name}} -</div>
						</template>
						<template>
							<div v-if="item.autograph">{{item.autograph}}</div>
							<div v-else class="terch-list-i-pl">Hi</div>
						</template>
						
						<div>
							<button class="ipng but_maino1_slide" @click="goToAppModel('teach/space',item.user_id,item.push_code,item.app_code)"></button>
							<template v-if="item.user_id == $g.user_id">
								<button class="ipng but_Collection02_slide" @click="getFollow(item.user_id)"></button>
							</template>
							<template v-else>
									<button v-preventReClick class="ipng but_Collection02_slide" v-if="!is_newlogin" @click="getFollow(item.id)"></button>
									<button v-preventReClick class="ipng but_Collection02_slide" v-else-if="item.is_relation == 0" @click="getFollow(item.user_id, 'add')"></button>
									<button v-preventReClick class="ipng but_Collection02_down" @click="getFollow(item.user_id, 'del')" v-else-if="item.is_relation == 1"></button>
							</template>

							<button v-preventReClick="5000" class="ipng but_chat02_slide" @click="parent(item,1)"></button>
						</div>
					</div>
				</li>
			</template>
		</ul>
		<el-pagination v-if="total_sum > page_size"
			@current-change="SizeChange"
			:current-page="page_index"
			:page-size="page_size"
			layout="total, prev, pager, next, jumper"
			:total="total_sum">
		</el-pagination>
		<div class="dependent" v-if="placeholder">
			<i class="ipng image_state01"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>
		<chat ref="child"></chat>
	</div>
</template>

<script>
    import multiCascader from "@/components/common/multi-cascader";
	import chat from '@/components/common/chat';
	export default {
		components: {
			chat,
            multiCascader
        },
		data(){
			return {
				screen: 'favs',
				search: '',
				page_index: 1,
				page_size: 12,
				total_sum: 0,
				terchList: [],
				link_id: '',
				sectionList: [], //学段
				section_id: 0,
				subjectList: [], //科目
                subject_id: 0,
                // 多级：
                platform_id:0,
                grade_id:0,
				placeholder: false,
				loading: true,
				keyword: '',
				user_multistage:   this.$store.state.userInfo === null ? false :  this.$store.state.userInfo.is_level,
				// is_newlogin: false,
				is_newlogin:  is_empty(this.$store.state.userInfo) ? false : true,
			}
		},
		destoryed() {
		    this.$destroy(chat)
		},
		created(){
			// this.getOrgLevel3();
			// this.getterchList()
		},
		mounted () {
		},
        computed: {
            isMulti(){
                return this.$store.getters.isMulti;
			},
			isSchool(){
                return this.$store.getters.isSchool;
            }    
		},     
		watch: {
			isMulti:{
				handler(a,b){
					this.getOrgLevel3();
				},immediate:true
			}
		},   
		methods: {
			parent(obj,type){
				if (!this.is_newlogin) {
					this.$message.warning('请登录~')
					return
				}
				if (obj.id == this.$g.user_id || obj.user_id == this.$g.user_id) {
					this.$message.warning('不能跟自己通讯哦~')
					return
				}
                console.log(obj,type)
				this.$refs.child.getUserChatOne(obj,type)
			},
			//列表
			getterchList(){
				let success = (res =>{
					this.terchList = res.data.data;
					this.total_sum = parseInt(res.data.data_sum)
					this.page_index = parseInt(res.data.page_index)

					this.loading = false
					this.terchList.length === 0
					? this.placeholder = true
					: this.placeholder = false
					
				})
				if (!this.isMulti) {
					this.$ajax({
						url: 'api/user/user',
						method: 'get',
						params: {
							page: this.page_index,
							size: this.page_size,
							userid: this.$g.user_id,
							order: this.screen,
							name: this.keyword,
							org_id: this.section_id,
							subject_id: this.subject_id,
							role_id: 6,
							data_type: 2,
							is_famous: 1,
						},
						func:{success: success}
					})
				}else{
					this.$ajax({
						url: 'api/user/teacher_master_list',
						method: 'get',
						params: {
							page_index: this.page_index,
							page_size: this.page_size,
							order: this.screen,
							study_section_id: this.section_id,
							subject_id: this.subject_id,
                            keyword: this.keyword,
                            platform_id:this.platform_id,
                            grade_id:this.grade_id,
						},
						func:{success: success}
					})
				}
			},
			//获取年级
			getOrgLevel3(val){
				const orgUrl = this.isMulti ? 'api/newlevel/platform_org' : 'api/org/org';
				let success = (res =>{
					this.sectionList = res.data;
					this.sectionList.unshift({id:0, name: '全部'})
					this.getSubjectList(this.sectionList[0].id)
					this.getterchList()
				})
				this.$ajax({
					url: orgUrl,
					method: 'get',
					params: {
						status: 1,
						level: 2,
						pid: 1
					},
					func: {success: success}
				})
			},
			//获取科目
			getSubjectList(orgid){
				const subUrl = this.isMulti ? 'api/newlevel/platform_subject' : 'api/cate/subject';
				let success = (res =>{
					this.subjectList = res.data;
					this.subjectList.unshift({id:0, name: '全部'})
					this.section_id = orgid
					this.getterchList()
				})
				this.$ajax({
					url: subUrl,
					method: 'get',
					params: {
						status: 1,
						type: 2,
						org_id: orgid === orgid ? orgid : null
					},
					func: {success: success}
				})
			},
			subjectChange(id) {
				this.subject_id = id;
				this.getterchList();
			},
			getFollow(id, type){
				if (!this.is_newlogin) {
					this.$message.warning('请登录~')
					return
				}
				if(id == this.$g.user_id){
					this.$message.warning('不能关注自己~')
					return
				}

				let state = ''
				if (type == 'add') {
					state = 'add'
				}else{
					state = 'del'
				}
				
				let success = ( res =>{
					this.$message.success(res.msg);
					this.getterchList()
				});

				this.$ajax({
					url: 'api/user/bind_relation',
					method: 'post',
					data: {
						user_id: this.$g.user_id,
						follow_id: id,
						add_delete: state,
						type: 0
					},
					func: {
						success: success
					}
				})
			},

			SizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.page_index = val
				this.getterchList()
            },
            // 多级
            resChosed(obj){
                console.log(obj,"选择")
                this.platform_id = obj.platform_id;
                this.section_id = obj.study_section_id;
                this.grade_id = obj.grade_id;
                this.subject_id = obj.subject_id;
                this.page_index = 1;
                this.getterchList();
            },
		}
	}
</script>